
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:h="http://java.sun.com/jsf/html"
      xmlns:f="http://java.sun.com/jsf/core"
      xmlns:p="http://primefaces.org/ui"
      xmlns:ui="http://java.sun.com/jsf/facelets">

    <h:form id="hform">
        <p:growl life="4000" autoUpdate="true" severity="info, warn" id="growl" showDetail="true"  />
        <p:messages id="message"  showDetail="true" severity="fatal, error"  closable="true" />
        <p:panelGrid id="panel" styleClass="grid" columns="8">

            <p:selectOneMenu filterMatchMode="contains" filter="true" id="tipoHistorial" label="tipo de historial"  value="#{managedBeanHistorial.tipoHistorial}">  
                <f:selectItem itemLabel="Aportes v/s Ventas" itemValue="1" />
                <f:selectItem itemLabel="Aportes totales" itemValue="2" />
                <f:selectItem itemLabel="Aportes por municipio" itemValue="3" />
                <f:selectItem itemLabel="Ventas totales" itemValue="4" />
                <f:selectItem itemLabel="Ventas por cliente" itemValue="5" />
                <p:ajax update="tipoGrafico,tipoPeriodo,boton" listener="#{managedBeanHistorial.cargaTipoPeriodo}" />
            </p:selectOneMenu>


            <p:selectOneMenu id="tipoGrafico"  label="tipo de grafico" required="true" value="#{managedBeanHistorial.tipoGrafico}">  
                <f:selectItems value="#{managedBeanHistorial.listaGraficos.entrySet()}" var="entrada" 
                               itemValue="#{entrada.key}" itemLabel="#{entrada.value}"/>
                <p:ajax update="boton"/>


            </p:selectOneMenu>

            <p:selectOneMenu id="tipoPeriodo" disabled="#{managedBeanHistorial.disablePeriodo}" label="tipo de periodo" required="true" value="#{managedBeanHistorial.tipoPeriodo}">   
                <f:selectItem itemLabel="Mensual" itemValue="1" />
                <f:selectItem itemLabel="Anual" itemValue="2" />
            </p:selectOneMenu> 
            <p:fieldset styleClass="periodo"  legend="periodo">
                <p:panelGrid styleClass="periodo" columns="4">
                    <h:outputLabel value="Inicio:"/>
                    <p:calendar  label="inicio" required="true" value="#{managedBeanHistorial.inicio}" pattern="yyyy-MM-dd" locale="es"  navigator="true" mindate="1995-01-01" maxdate="#{managedBeanHistorial.fechaActual()}" />
                    <h:outputLabel  value="Fin:"/>
                    <p:calendar  label="fin" required="true" value="#{managedBeanHistorial.fin}" pattern="yyyy-MM-dd" locale="es"  navigator="true" mindate="1995-01-01" maxdate="#{managedBeanHistorial.fechaActual()}" />
                </p:panelGrid>
            </p:fieldset>

            <f:facet name="footer" >
                <p:commandButton id='boton'  oncomplete="lazyload#{managedBeanHistorial.tipoGrafico}();" update="generarPDF,message,grafico2,grafico1,grafico3"  value="Generar gráfico" actionListener="#{managedBeanHistorial.generarGrafico}" style="margin-left: 45% "/>
                <p:commandButton ajax="false"   id="generarPDF" disabled="#{managedBeanHistorial.mostrarBoton}" actionListener="#{managedBeanHistorial.crearPDF(event)}"  onclick="exportChart#{managedBeanHistorial.tipoGrafico}();PrimeFaces.monitorDownload(showStatus, hideStatus) " value="Generar PDF" icon="ui-icon-extlink" >
                    <p:fileDownload value="#{managedBeanHistorial.file}" />
                </p:commandButton>
            </f:facet>

        </p:panelGrid>


        <p:tooltip value="Tipo de historial" for="tipoHistorial"  />  
        <p:tooltip value="Tipo de gráfico" for="tipoGrafico"  />
        <p:tooltip value="Tipo de periodo" for="tipoPeriodo"  />
        
        <p:blockUI block="hform" trigger="generarPDF,boton" >
            <p:graphicImage style="background: transparent" value="/resources/imagenes/loading.gif"/>
        </p:blockUI>
        
        <script type="text/javascript">
                    function exportChart1() {
                        // exportAsImage() will return a base64 png encoded string
                        img = grafico1.exportAsImage();
                        document.getElementById('hform:b64').value = img.src;
                    }
                    function exportChart2() {
                        // exportAsImage() will return a base64 png encoded string
                        img = grafico2.exportAsImage();
                        document.getElementById('hform:b64').value = img.src;
                    }
                    function exportChart3() {
                        // exportAsImage() will return a base64 png encoded string
                        img = grafico3.exportAsImage();
                        document.getElementById('hform:b64').value = img.src;
                    }
        </script>
<script type="text/javascript">
function showStatus() {
statusDialog.show();
}
function hideStatus() {
statusDialog.hide();
}
</script> 
        <h:inputHidden id="b64" value="#{managedBeanHistorial.base64Str}" />

        <p:outputPanel rendered="#{!managedBeanHistorial.error}"  id="grafico1" layout="block">  
            <p:barChart widgetVar="grafico#{managedBeanHistorial.tipoGrafico}"   id="graficoBarra" value="#{managedBeanHistorial.categoryModel}" legendPosition="ne"  animate="true" zoom="true"
                        title="#{managedBeanHistorial.titulo}" min="0" shadow="true"  style="height:350px; width: 980px; " xaxisAngle="45"
                        xaxisLabel="#{managedBeanHistorial.xLabel}" datatipFormat="%c $%i"  yaxisLabel="#{managedBeanHistorial.yLabel}" rendered="#{requestScope.shouldRender}"/>
        </p:outputPanel> 
        <p:outputPanel rendered="#{!managedBeanHistorial.error}"  id="grafico2" layout="block">  
            <p:lineChart widgetVar="grafico#{managedBeanHistorial.tipoGrafico}" id="graficoLinea" value="#{managedBeanHistorial.categoryModel}" legendPosition="ne"  animate="true" zoom="true"
                         title="#{managedBeanHistorial.titulo}" minY="0" shadow="true"  style="height:350px; width: 980px; " xaxisAngle="45"
                         xaxisLabel="#{managedBeanHistorial.xLabel}" datatipFormat="%c $%i"  yaxisLabel="#{managedBeanHistorial.yLabel}" rendered="#{requestScope.shouldRender}"/>
        </p:outputPanel>
        <p:outputPanel rendered="#{!managedBeanHistorial.error}"  id="grafico3" layout="block">  
            <p:pieChart widgetVar="grafico#{managedBeanHistorial.tipoGrafico}" id="graficoTorta" value="#{managedBeanHistorial.pieModel}" legendPosition="ne"
                        title="#{managedBeanHistorial.titulo}" style="height:350px; width: 980px; " 
                        showDataLabels="true" sliceMargin="7" legendCols="2" shadow="true" dataFormat="percent" rendered="#{requestScope.shouldRender}" />
        </p:outputPanel>  

        <p:remoteCommand  name="lazyload2" update="grafico2">  
            <f:setPropertyActionListener value="#{true}"   
                                         target="#{requestScope.shouldRender}" />  
        </p:remoteCommand>
        <p:remoteCommand name="lazyload1" update="grafico1">  
            <f:setPropertyActionListener value="#{true}"   
                                         target="#{requestScope.shouldRender}" />  
        </p:remoteCommand>
        <p:remoteCommand name="lazyload3" update="grafico3">  
            <f:setPropertyActionListener value="#{true}"   
                                         target="#{requestScope.shouldRender}" />  
        </p:remoteCommand>

    </h:form>



</html>

